<template>
    <div>
     <table>
        <tbody>
            <tr>
                <td>房间类型</td>
                <td><input type="text" v-model="list.houseName"></td>
            </tr>
            <tr>
                <td>房间价格</td>
                <td><input type="text" v-model="list.price"></td>
            </tr>
            <tr>
                <td>是否有押金</td>
                <td>
                    <input type="radio" :value="true" v-model="list.isDeposit">需要
                    <input type="radio" :value="false" v-model="list.isDeposit">不需要
                     <input type="text" v-model="list.deposit":disabled="list.isDeposit==false">
                </td>
            </tr>
           
            <tr>
                <td>面积</td>
                <td><input type="text" v-model="list.area"></td>
            </tr>
            <tr>
                <td>人数</td>
                <td><input type="text" v-model="list.count"></td>
            </tr>
            <tr>
                <td>加床方式</td>
                <td><input type="text" v-model="list.extrabed"></td>
            </tr>
            <tr>
                <td>房间图片</td>
                <td>
                    <input type="file" @change="upde">
                   <img :src="'https://localhost:7242'+list.houseImg" style="width: 100px; height: 100px;" alt="">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td> <input type="radio" :value="true" v-model="list.isDeposit">true
                    <input type="radio" :value="false" v-model="list.isDeposit">false
                </td>
            </tr>
            <tr>
                <td>房间类型</td>
                <td>
                <select v-model="list.tid">
                    <option  v-for="a in bd" :value="a.tid">{{a.tname}}</option>
                   
                </select>
            </td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="保存" @click="Add"></td>
                <td></td>
            </tr>
        </tbody>
     </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted}from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router=useRouter();
const upde=(a:any)=>{
    var f=a.target.files[0];
    var fs=new FormData();
    fs.append("file",f);
    if(f.size>1024*1024){
        alert('照片不能大于1M')
    }
    
    if(f.type=="image/jpeg"||f.type=="image/png"){
        axios.post("https://localhost:7242/api/Upfile/UpFile",fs).then(res=>{
          list.value.houseImg=res.data
     })
    }
    else{
        alert('照片的格式不正确')
    }

} 







const bd=ref([{
     "tid": 1,
    "tname": "大床房"
}])

onMounted(()=>{
    Bang(); 
})

const Bang=()=>{
    axios.get("https://localhost:7242/api/Type/Bang").then(res=>{
       bd.value=res.data;
    })
}





const list=ref({
    "houseId": 0,
  "houseName": "string",
  "price": 0,
  "isDeposit": true,
  "deposit": 0,
  "area": 0,
  "count": 0,
  "extrabed": 0,
  "houseImg": "string",
  "state": true,
  "tid": 0
})

const Add=()=>{
    if(list.value.houseName.length<2||list.value.houseName.length>10){
        alert('酒店名不能小于2并且不能大于10')
        return;
    }
    axios.post("https://localhost:7242/api/House/Add",list.value).then(res=>{
        if(res.data>0){
            alert('添加成功');
            router.push({
                path:"/"
            });
        }else{
            alert('添加失败');
        }
        
    })
}
</script>

<style scoped>

</style>